<template>
	<view>
		<view class="header">
			<navigator open-type="switchTab" url="../index">
				<view class="back">
					返回
				</view>
				<view class="title-a">
					{{titlelist.ctitle}}
				</view>

			</navigator>
			<view class="title">
				<text :class="{active:show==1}" @click="show=1">新品</text>
				<text :class="{active:show==2}" @click="show=2">销量</text>
				<text :class="{active:show==3}" @click="show=3">价格</text>
				<text :class="{active:show==4}" @click="show=4">筛选</text>
			</view>

		</view>
		<view class="center">
			<view class="center-b">
				<navigator :url="`detal/detal?productId=`+item.id"  v-for="item in productlist" :key="item.id">
					<view class="shop">
						<view class="on">
							<image :src="item.cover_img" mode=""></image>
						</view>
						<view class="under">
							<view>
								{{item. gname}}
							</view>
							<view>
								{{item.origin_city}}
							</view>
							<view>
								¥{{item.price_now/100}}
							</view>
						</view>
					</view>
				</navigator>
			
				
			</view>
		</view>
	</view>
</template>

<script>
	import IndexApi from '@/api/index/index.js'
	export default {
		data() {
			return {
				show: '1',
				page: {
					kindId: '',
					start: '1',
					limit: '10'
				},

				productlist: [],
				titlelist: []
			};
		},
		methods: {
			getprduct() {


				IndexApi.productlist(this.page).then((res) => {
					this.productlist = res.data.data.list
					this.titlelist = res.data.kind
					console.log(res)
				})
			}
		},
		onLoad(option) {
			this.page.kindId = option.Id;
			this.getprduct()
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		height: 230rpx;
		background: #354e44;
		overflow: hidden;

		.back {
			margin-top: 20rpx;
			margin-left: 20rpx;
			color: #fff;
		}

		.title-a {
			text-align: center;
			font-size: 34rpx;
			font-weight: bolder;
			color: #FFFFFF;
		}

		.title {
			display: flex;
			margin-top: 65rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			justify-content: space-around;

			.active {
				color: red;
				padding-bottom: 5rpx;
				border-bottom: 3px solid #fff;
			}
		}
	}

	.center {
		background: #f1ece7;
		padding-top: 60rpx;
		overflow: hidden;


		.center-b {
			width: 670rpx;
			margin: 0 auto;


			.shop {
				width: 316rpx;
				height: 450rpx;
				background: #fff;
				margin-right: 19rpx;
				float: left;
				margin-top: 20rpx;

				.on {
					width: 100%;
					height: 250rpx;

					image {
						width: 100%;
						height: 250rpx;
					}
				}

				.under {
					width: 100%;
					height: 200rpx;

					background: #fff:nth-child(1) {
						margin-left: 30rpx;
					}

					:nth-child(2) {

						margin-left: 200rpx;
						margin-top: 20rpx;
						font-size: 22rpx;
						color: #8D8D8D;
					}

					:nth-child(3) {
						margin-left: 30rpx;
						font-size: 26rpx;
						color: #3E3E3E;
					}

				}
			}
		}
	}
</style>
